<template>
  <div>
    <div class="search-container">
      <el-form class="search-form" :model="form" ref="form" label-width="90px" label-position="right" inline>
        <el-row>
          <el-form-item label="课程标题" prop="courseTitle">
            <el-input v-model="form.courseTitle"></el-input>
          </el-form-item>
          <el-form-item label="课程类型" prop="contentType">
            <el-select v-model="form.contentType" style="width: 100%">
              <el-option :value="1" label="图文课程"></el-option>
              <el-option :value="2" label="视频课程"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="onReset">重置</el-button>
            <!-- <el-button @click="showTotal=!showTotal" type="text">{{showTotal ? '收起' : '展开'}}<i class="el-icon--right" :class="{'el-icon-arrow-down':!showTotal,'el-icon-arrow-up':showTotal}"></i></el-button> -->
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="mt-10">
      <el-table :data="data" v-loading="loading">
        <el-table-column prop="courseTitle" label="课程标题" min-width="180" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="isEssence" label="是否精选" min-width="100">
          <template slot-scope="scope">
            {{scope.row.isEssence == 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column prop="isHot" label="是否热门" min-width="100">
          <template slot-scope="scope">
            {{scope.row.isHot == 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column prop="isHpage" label="是否首推" min-width="100">
          <template slot-scope="scope">
            {{scope.row.isHpage == 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column prop="readTimes" label="阅读次数" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="oneCourseType" label="课程分类" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.oneCourseType}} > {{scope.row.twoCourseType}}
          </template>
        </el-table-column>
        <el-table-column prop="publishDate" label="课程发布时间" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.publishDate">{{$utils.dateFormat(new Date(scope.row.publishDate), 'yyyy-MM-dd')}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="goDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt-10 t-right" v-if="total > 0">
      <el-pagination
        background
        :current-page="currentPage"
        :total="total"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
      </el-pagination>
    </div>
    <detail-dialog v-if="dialogData" :type="0" :visible.sync="dialogVisible" :courseData="dialogData"></detail-dialog>
  </div>
</template>

<script>
import DetailDialog from './getCustomerForCourse'
  export default {
    components: {
      DetailDialog: DetailDialog
    },
    data () {
      return {
        form: {},
        data: [],
        currentPage: 1,
        pageSize: 10,
        showTotal: false,
        dialogVisible: false,
        dialogId: '',
        loading: false,
        total: 0,
        dialogData: {}
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      onSearch() {
        this.currentPage = 1
        this.loadData()
      },
      onReset() {
        this.$refs.form.resetFields()
        this.currentPage = 1
        this.loadData()
      },
      loadData() {
        this.loading = true
        const params ={
          ...this.form,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }
        this.$api.report.courseReadTimesReport(params).then(res => {
          if(res.success){
            this.data = res.data.list
            this.total = res.data.total
            this.loading = false
          }else {
            this.loading = false
          }
        }).catch(err => {
          this.loading = false
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.loadData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.loadData()
      },
      goDetail(data) {
        this.dialogData = data;
        this.dialogVisible = true
      }
    }
  }
</script>
